<template>
	<div>
		<el-form :disabled="isDisabled" class="dialog-layout" ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="auto">
			<el-form-item required label="名称">
				<el-input v-model="state.ruleForm.name" placeholder="请输入名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="state.ruleForm.description" placeholder="请输入备注" clearable></el-input>
			</el-form-item>
		</el-form>
		<div class="dialog-btn">
			<el-button @click="onCancel" size="default">取 消</el-button>
			<el-button :disabled="isDisabled" type="primary" @click="onSubmit" size="default">确 认</el-button>
		</div>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref, onMounted } from 'vue';
import { SysRoleCreate, SysRoleUpdate } from '/@/api/role/index';
import { ElMessage } from 'element-plus';

// 定义父组件传过来的值
const props = defineProps({
	editItem: {
		type: Object,
		default: () => {},
	},
	isDisabled: {
		type: Boolean,
		default: false,
	},
});
// 定义子组件向父组件传值/事件
const emit = defineEmits(['close']);

// 页面加载时
onMounted(() => {
	if (props.editItem) {
		state.ruleForm.name = props.editItem.name;
		state.ruleForm.description = props.editItem.description;
	}
});
// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		name: '', // 名称
		description: '', // 描述
	},
});

// 关闭弹窗
const onCancel = () => {
	emit('close');
};
// 提交
const onSubmit = async () => {
	const param = {
		name: state.ruleForm.name,
		description: state.ruleForm.description,
	};
	if (!state.ruleForm.name) return ElMessage.error('请输入角色名称');
	if (props.editItem.id) {
		await SysRoleUpdate(param, props.editItem.id);
	} else {
		await SysRoleCreate(param);
	}
	ElMessage.success(props.editItem.id ? '修改成功' : '新增成功');
	onCancel();
};
</script>
